<style>
.tab-bar {
	
}
.tab-bar-root {
	width: 100%;
	box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(0, 0, 0, 0.21);
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1000;
	background-color: #FFF;
}
.tab-bar-body {
	display: flex;
}
.tab-bar-item {
	flex: 1;
	height: 134rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tab-bar-cover {
	width: 100%;
	height: 134rpx;
}
</style>

<template>
	<view class="tab-bar">
		<view class="tab-bar-root">
			<view class="tab-bar-body">
				<button class="tab-bar-item" @click="onClick(0, '/pages/index/index')">
					<image class="tab-bar-item-icon" src="/static/tab-bar/1.png" v-show="active == 0" style="width:65rpx; height:77rpx;"></image>
					<image class="tab-bar-item-icon" src="/static/tab-bar/01.png" v-show="active != 0" style="width:65rpx; height:77rpx;"></image>
				</button>
				<button class="tab-bar-item" @click="onClick(1, '/pages/user/equity')">
					<image class="tab-bar-item-icon" src="/static/tab-bar/2.png" v-show="active == 1" style="width:60rpx; height:61rpx;"></image>
					<image class="tab-bar-item-icon" src="/static/tab-bar/02.png" v-show="active != 1" style="width:60rpx; height:61rpx;"></image>
				</button>
				<button class="tab-bar-item" @click="onClick(2, '/pages/order/index/index')">
					<image class="tab-bar-item-icon" src="/static/tab-bar/3.png" v-show="active == 2" style="width:53rpx; height:67rpx;"></image>
					<image class="tab-bar-item-icon" src="/static/tab-bar/03.png" v-show="active != 2" style="width:53rpx; height:67rpx;"></image>
				</button>
				<button class="tab-bar-item" @click="onClick(3, '/pages/user/index/index')">
					<image class="tab-bar-item-icon" src="/static/tab-bar/4.png" v-show="active == 3" style="width:65rpx; height:67rpx;"></image>
					<image class="tab-bar-item-icon" src="/static/tab-bar/04.png" v-show="active != 3" style="width:65rpx; height:67rpx;"></image>
				</button>
			</view>
			<apple-sliver></apple-sliver>
		</view>
		<view class="tab-bar-cover" v-if="cover"></view>
	</view>
</template>


<script>

export default {

	props: {
		active: {
			type: [Number, String],
			default: 0,
		},
		cover: {
			type: Boolean,
			default: false,
		}
	},

	methods: {

		onClick(index, url) {
			if (String(index) == String(this.active)) {
				return;
			}
			uni.navigateTo({url: url});
		},

	}

};
</script>
